<template>
  <div v-loading.lock="loading" class="base-content storage-product-store-list">
    <div class="basic-info">
      <el-form ref="queryForm" :inline="true" :model="queryForm" label-width="90px">
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="所在位置"
            >
              <el-select
                v-model="queryForm.storageId"
                placeholder="请选择"
                filterable
                clearable
                style="float:left;width: 33%;"
                @change="selectStorage()"
              >
                <el-option
                  v-for="item in storageIdOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select
                v-model="queryForm.storageAreaId"
                placeholder="请选择"
                filterable
                clearable
                style="float:left;width: 33%;"
                @change="selectStorageArea()"
              >
                <el-option
                  v-for="item in storageAreaOptions"
                  :key="item.id"
                  :label="item.areaName"
                  :value="item.id"
                />
              </el-select>
              <el-select
                  v-model="queryForm.storageSpaceId"
                  filterable
                  clearable
                  placeholder="请选择"
                  style="float:left;width: 34%;"
                >
                  <el-option
                    v-for="item in storageSpaceOptions"
                    :key="item.id"
                    :label="item.number"
                    :value="item.id"
                  />
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="危化品" prop="nameOrNum">
              <el-input v-model="queryForm.nameOrNum" placeholder="请输入危化品编号或名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="规格型号" prop="specifications">
              <el-input v-model="queryForm.specifications" placeholder="请输入规格型号" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="分类" prop="classOneId">
              <BaseTreeSelect
                v-model="queryForm.classOneId"
                :tree-data="categoryTree"
                placeholder="请选择分类"
                clearable
                @node-click="handleNodeClick"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关联序列号" prop="serialNum">
              <el-input v-model="queryForm.serialNum" placeholder="请输入序列号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item prop="isOverlook">
              <el-checkbox v-model="queryForm.isOverlook">忽略实际库存为0</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="onQuery">查询</el-button>
            <el-button @click="cancelForm">清空</el-button>
          </el-col>
        </el-row>
      </el-form>

      <div class="base-content-operate">
        <el-button
          type="primary"
          icon="el-icon-document-copy"
          @click="exportData"
          >导出</el-button
        >
      </div>

      <el-table
        :data="list"
        height="calc(100% - 130px)"
        style="width: 100%;min-height: 200px;"
      >
        <el-table-column label="仓库">
          <template slot-scope="scope">
            {{ scope.row.storageName }}
          </template>
        </el-table-column>
        <el-table-column label="库区">
          <template slot-scope="scope">
            {{ scope.row.storageAreaName }}
          </template>
        </el-table-column>
        <el-table-column label="库位">
          <template slot-scope="scope">
            {{ scope.row.storageSpaceName }}
          </template>
        </el-table-column>
        <el-table-column label="危化品编号">
          <template slot-scope="scope">
            {{ scope.row.productNum }}
          </template>
        </el-table-column>
        <el-table-column label="危化品名称">
          <template slot-scope="scope">
            {{ scope.row.productName }}
          </template>
        </el-table-column>
        <el-table-column label="分类">
          <template slot-scope="scope">
            {{ scope.row.classOneName }}
          </template>
        </el-table-column>
        <el-table-column label="规格型号">
          <template slot-scope="scope">
            {{ scope.row.specifications }}
          </template>
        </el-table-column>
        <el-table-column label="包装单位">
          <template slot-scope="scope">
            {{ scope.row.unitName }}
          </template>
        </el-table-column>
        <el-table-column label="形态">
          <template slot-scope="scope">
            {{ scope.row.morphologyName }}
          </template>
        </el-table-column>
        <el-table-column label="可用库存">
          <template slot-scope="scope">
            {{ scope.row.availableStore }}
          </template>
        </el-table-column>
        <el-table-column label="实际库存">
          <template slot-scope="scope">
            {{ scope.row.actualStore }}
          </template>
        </el-table-column>
        <el-table-column label="冻结库存">
          <template slot-scope="scope">
            {{ scope.row.frozenStore }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link size="mini" type="primary" @click="handleView(scope.row)"
              >查询库存明细</el-link
            >
          </template>
        </el-table-column>
      </el-table>

      <BasePagination
        :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
      <el-table
        :data="statisticsList"
        :header-cell-style="{ height: '30px', padding: '0px' }"
        :cell-style="{ height: '30px', padding: '0px'}"
        style="width: 100%;height: 100px;flex: none;"
      >
        <el-table-column label="总可用库存">
          <template slot-scope="scope">
            {{ scope.row.availableAmount }}
          </template>
        </el-table-column>
        <el-table-column label="总实际库存">
          <template slot-scope="scope">
            {{ scope.row.actualAmount }}
          </template>
        </el-table-column>
        <el-table-column label="总冻结库存">
          <template slot-scope="scope">
            {{ scope.row.frozenAmount }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <StorageProductStoreEdit
      v-if="dialogFormVisible"
      ref="StorageProductStoreEdit"
      :edit-id.sync="editId"
      :dialog-form-visible.sync="dialogFormVisible"
    />
  </div>
</template>

<script>
import { getStorageList, getStorageAreaList, getStorageSpaceList } from "../../../api/Storage/StorageOrderIn.js";
import { getList, getStatistics } from "../../../api/Storage/StorageProductStore.js";
import { getTreeData } from "../../../api/Storage/StorageProduct.js";
import { formatData } from "../../../utils/index"
import StorageProductStoreEdit from "./StorageProductStoreEdit.vue";
export default {
  name: "StorageProductStoreList",
  components: { StorageProductStoreEdit },
  data() {
    return {
      loading: true,
      list: [],
      statisticsList: [],
      categoryTree: [],
      appId: 1000,
      storageIdOptions: [],
      storageAreaOptions: [],
      storageSpaceOptions: [],
      dialogFormVisible: false,
      queryForm: {
        storageId: null,
        storageAreaId: null,
        storageSpaceId: null,
        nameOrNum: this.$route.query.productNum,
        specifications: "",
        classOneId: null,
        serialNum: "",
        isOverlook: true
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
      editId: ''
    };
  },
  created() {
    this.init();
    this.getList();
  },
  methods: {
    async init() {
      await this.getStorageOptions();
      await this.getOptions();
      await this.getStatisticsList();
    },
    getOptions() {
      return new Promise((resolve) => {
        getTreeData({ AppId: this.appId, Status: 1 }).then((res) => {
          this.categoryTree = formatData(res.data);
          resolve();
        });
      })
    },
    handleNodeClick(data, node) {
      if (data.id !== null && data.id.length !== 0) {
        this.queryForm.classOneId = data.id;
      }
    },
    getStorageOptions() {
      return new Promise((resolve) => {
        getStorageList().then((res) => {
          this.storageIdOptions = res.data.dataList;
          resolve();
        });
      })
    },
    selectStorage() {
      this.queryForm.storageAreaId = null
      this.queryForm.storageSpaceId = null
      getStorageAreaList({
        storageId: this.queryForm.storageId,
        // status: 1,
        pageIndex: 1,
        pageSize: 50000
      }).then((res) => {
        this.storageAreaOptions = res.data.dataList;
      });
    },
    selectStorageArea() {
      this.queryForm.storageSpaceId = null
      getStorageSpaceList({
        storageId: this.queryForm.storageId,
        storageAreaId: this.queryForm.storageAreaId,
        // status: 1,
        pageIndex: 1,
        pageSize: 50000
      }).then((res) => {
        this.storageSpaceOptions = res.data.dataList;
      });
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    cancelForm() {
      this.queryForm.storageId = null
      this.queryForm.storageAreaId = null
      this.queryForm.storageSpaceId = null
      this.$refs.queryForm.resetFields();
      this.pagination.pageIndex = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      getList({
        ...this.queryForm,
        pageIndex: this.pagination.pageIndex,
        pageSize: this.pagination.pageSize
      })
        .then((res) => {
          this.list = res.data.dataList ? res.data.dataList : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getStatisticsList() {
      getStatistics({
        ...this.queryForm
      }).then((res) => {
        var statisticsList = []
        statisticsList.push(res.data)
        this.statisticsList = statisticsList
      }).catch(() => {
      });
    },
    // 查看明细
    handleView(rowData) {
      this.dialogFormVisible = true;
      this.editId = rowData.id
    },
    onQuery() {
      this.pagination.pageIndex = 1;
      this.getList();
      this.getStatisticsList();
    },
    // 导出
    exportData() {
      var list = []
      getList({
        ...this.queryForm,
        pageIndex: 1,
        pageSize: 1000000
      }).then((res) => {
        list = res.data.dataList ? res.data.dataList : [];
        import("@/vendor/Export2Excel").then((excel) => {
          const tHeader = [
            "仓库",
            "库区",
            "库位",
            "危化品编号",
            "危化品名称",
            "分类",
            "规格型号",
            "包装单位",
            "形态",
            "可用库存",
            "实际库存",
            "冻结库存",
          ];
          const filterVal = [
            "storageName",
            "storageAreaName",
            "storageSpaceName",
            "productNum",
            "productName",
            "classOneName",
            "specifications",
            "unitName",
            "morphologyName",
            "availableStore",
            "actualStore",
            "frozenStore",
          ];
          const data = this.formatJson(filterVal, list);
          excel.export_json_to_excel({
            header: tHeader, // 表头
            data, // 数据
            filename: "库存管理信息", // 导出文件名
            autoWidth: true, // 导出宽度自动
            bookType: "xlsx", // 导出后缀
          });
        });
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
  },
};
</script>
<style lang="scss">
.storage-product-store-list{
  .el-form-item__content{
    width: calc(100% - 100px);
    .el-checkbox{
      margin-left: 30px;
    }
  }
}
</style>
